<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('会议主题')" prop="meetingTitle">
            <el-input v-model="form.meetingTitle" :placeholder="$t('会议主题')" maxlength="50" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('使用人')" prop="meetingUser">
            <UserSelect v-model="form.meetingUser" filterable :placeholder="$t('使用人')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会议室')" prop="meetingRoomId">
            <!--            <el-input v-model="form.meetingRoomName" :placeholder="$t('名称')" maxlength="50" show-word-limit />-->
            <el-select v-model="form.meetingRoomId" clearable placeholder="请选择">
              <el-option
                v-for="item in oaMeetingRoomList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会议室地点')" prop="place">
            <el-input v-model="form.place" :placeholder="$t('地点')" maxlength="50" show-word-limit disabled />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="$t('参会人员')" prop="meetingAttendUser">
            <UserSelect v-model="form.meetingAttendUser" filterable multiple :placeholder="$t('参会人员')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会议日期')" prop="meetingDate">
            <el-date-picker
              v-model="form.meetingDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会议开始时间')" prop="meetingStartingTime">
            <el-time-select
              v-model="form.meetingStartingTime"
              placeholder="起始时间"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30'
              }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会议结束时间')" prop="meetingEndTime">
            <el-time-select
              v-model="form.meetingEndTime"
              placeholder="结束时间"
              :picker-options="{
                start: '08:30:00',
                step: '00:15:00',
                end: '18:30:00',
                minTime: form.meetingStartingTime
              }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('电话')" prop="phone">
            <el-input v-model="form.phone" :placeholder="$t('电话')" maxlength="25" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('最大容纳人数')" prop="largestNumber">
            <el-input-number v-model="form.largestNumber" :controls="false" :precision="0" :max="99999" :placeholder="$t('最大容纳人数')" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('是否有电话会议')" prop="callMeeting">
            <el-radio-group v-model="form.callMeeting" disabled>
              <el-radio
                v-for="dict in callMeetingOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
                disabled
              >{{ $t(dict.dictLabel) }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('是否有视频会议')" prop="videoMeeting">
            <el-radio-group v-model="form.videoMeeting" disabled>
              <el-radio
                v-for="dict in videoMeetingOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
                disabled
              >{{ $t(dict.dictLabel) }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <!--预定会议列表-->
      <div class="area-header">
        <span class="area-header-title">{{ $t('预定会议列表') }}</span>
      </div>
      <el-table :data="oaMeetingRoomReserveList" border tooltip-effect="darkTable">
        <el-table-column :label="$t('会议主题')" align="center" prop="meetingTitle" />
        <el-table-column :label="$t('使用人')" align="center" prop="meetingUserName" />
        <el-table-column :label="$t('会议日期')" align="center" prop="meetingDate" width="180" />
        <el-table-column :label="$t('会议开始时间')" align="center" prop="meetingStartingTime" width="180" />
        <el-table-column :label="$t('会议结束时间')" align="center" prop="meetingEndTime" width="180" />
      </el-table>

    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="oa:meetingReserve" />
    </div>
  </div>
</template>

<script>
import {
  getOaMeetingRoomReserve,
  listOaMeetingRoomReserve, saveOaMeetingRoomReserve
} from '@/api/oa/meeting/oaMeetingRoomReserve'
import {
  getOaMeetingRoom,
  listOaMeetingRoom
} from '@/api/oa/meeting/oaMeetingRoom'
export default {
  data() {
    return {
      callMeetingOptions: [], // 是否有视频会议字典
      videoMeetingOptions: [], // 表单参数
      oaMeetingRoomReserveList: [],
      oaMeetingRoomList: [],
      form: {
        id: undefined,
        meetingRoomId: undefined,
        meetingRoomName: undefined,
        meetingTitle: undefined,
        meetingUser: undefined,
        meetingUserName: undefined,
        largestNumber: undefined,
        meetingAttendUser: [],
        meetingDate: undefined,
        meetingStartingTime: undefined,
        meetingEndTime: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined
      },
      meetingAttendUser: [],
      queryParams: {
        id: undefined,
        meetingRoomId: undefined,
        meetingDate: undefined,
        pageNum: 1,
        pageSize: 10
      },
      loading: false,
      // 表单校验
      rules: {
        meetingTitle: [{ required: true, message: this.$t('必填信息'),	trigger: ['blur', 'change'] }],
        meetingRoomId: [{ required: true, message: this.$t('必填信息'),	trigger: ['blur', 'change'] }],
        meetingUser: [{ required: true, message: this.$t('必填信息'),	trigger: ['blur', 'change'] }],
        meetingAttendUser: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
        meetingStartingTime: [{ required: true, message: this.$t('必填信息'),	trigger: ['blur', 'change'] }],
        meetingEndTime: [{ required: true, message: this.$t('必填信息'),	trigger: ['blur', 'change'] }],
        meetingDate: [{ required: true, message: this.$t('必填信息'),	trigger: ['blur', 'change'] }]
      }
    }
  },
  watch: {
    'form.meetingRoomId': {
      handler(newValue) {
        // console.log('meetingRoomId属性监听', newValue, oldValue)
        this.form.meetingRoomId = newValue
        this.getOaMeetingRoom(this.form.meetingRoomId)
        this.listReserve(this.form.meetingRoomId, this.form.meetingDate)
      },
       deep: true,
      immediate: true // true首次加载执行，否则不执行为false或不添加此属性
    },
    'form.meetingDate': {
      handler(newValue) {
        // console.log('meetingDate属性监听', newValue, oldValue)
        this.form.meetingDate = newValue
        this.listReserve(this.form.meetingRoomId, this.form.meetingDate)
      },
       deep: true,
      immediate: true // true首次加载执行，否则不执行为false或不添加此属性
    }
  },
  created() {
    this.listOaMeetingRoom()
    this.getOaMeetingRoom(this.form.meetingRoomId)
    this.getDicts('sys_yes_no').then(response => {
      this.callMeetingOptions = response.data
    })
    this.getDicts('sys_yes_no').then(response => {
      this.videoMeetingOptions = response.data
    })
  },
  methods: {
    init(data) {
      this.loading = true
      if (data != null && data.id !== undefined) {
        getOaMeetingRoomReserve(data.id).then(response => {
          this.form = response.data
        })
        this.loading = false
      } else {
        this.reset()
        this.loading = false
      }
    },
    initRoom(id, item) {
      this.loading = true
      if (id != null && id !== undefined) {
        this.form.meetingRoomId = id
        this.form.meetingDate = item
        this.getOaMeetingRoom(id)
        this.loading = false
      } else {
        this.reset()
        this.loading = false
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        meetingRoomId: undefined,
        meetingRoomName: undefined,
        meetingTitle: undefined,
        meetingUser: undefined,
        meetingUserName: undefined,
        largestNumber: undefined,
        meetingAttendUser: [],
        meetingDate: undefined,
        meetingStartingTime: undefined,
        meetingEndTime: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined,
        oaMeetingRoomReserveList: []
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.reset()
      this.$parent.$parent.formOpen = false
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      if (this.$parent.$parent.formOpen !== undefined) {
        this.reset()
        this.$parent.$parent.formOpen = false
      }
      // 刷新list页面
      if (this.$parent.$parent.getList !== undefined) {
        this.$parent.$parent.getList()
      }
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          saveOaMeetingRoomReserve(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.closeForm()
            } else {
              this.msgError(this.$t('该时间段已被预定！'))
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      })
    },
    // 查询会议室
    listOaMeetingRoom() {
      listOaMeetingRoom({}).then(response => {
        this.oaMeetingRoomList = response.rows
      })
    },
    // 查询会议室详细信息
    getOaMeetingRoom(meetingRoomId) {
      getOaMeetingRoom(meetingRoomId).then(response => {
        this.form.phone = response.data.phone
        this.form.place = response.data.place
        this.form.largestNumber = response.data.largestNumber
        this.form.callMeeting = response.data.callMeeting
        this.form.videoMeeting = response.data.videoMeeting
      })
    },
    // 查询预定情况
    listReserve(meetingRoomId, meetingDate) {
      if (meetingRoomId === undefined || meetingDate === undefined) {
        this.oaMeetingRoomReserveList = []
        return false
      } else {
        this.queryParams.meetingRoomId = meetingRoomId
        this.queryParams.meetingDate = meetingDate
        listOaMeetingRoomReserve(this.queryParams).then(response => {
          this.oaMeetingRoomReserveList = response.rows
        })
      }
    }
  }

}
</script>
